<template>
    <div class="top_box">
      <div class="top_left">
        <div class="left-ico">
          <div class="iconbox">
            <img src="../../../public/logo.png" class="icon" alt="" />
          </div>
          <div class="title">胶东调水数据中台</div>
        </div>
        <!-- <div class="left-ico"> -->
        <!-- <div class="iconbox">
            <img src="../../../public/logo.png" class="icon" alt="" />
          </div> -->
        <!-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <div class="title">德州市数字孪生水网数据中台</div>
        </div> -->
      </div>
      <div class="top_center">
        <ul class="table_message_Ul" v-for="(item, index) in weather" :key="index">
          <li>{{ item.city }}</li>
          <li>
            <img class="weatherIcon" style="width: 1.5625vw"
              :src="require('@/assets/weather/' + item.weather + '.png')" />
          </li>
          <li>{{ item.weather }}</li>
          <li>{{ item.temperature }}℃</li>
          <li>
            <span style="line-height: 37px; color: #fff; font-size: 0.8rem"> {{ currentDate }}&nbsp;&nbsp;&nbsp;{{
              currentWeek }}&nbsp;&nbsp;&nbsp;{{ currentTime }}</span>
          </li>
        </ul>
      </div>
      <div class="top_right">
        <ul>
          <li @click="$router.push(path)">
            <el-tooltip class="item" effect="dark" content="放回首页" placement="bottom">
              <i class="el-icon-back"></i>
            </el-tooltip>
          </li>
          <el-popover placement="bottom" width="500" trigger="click">
            <li slot="reference" v-permission="['DynamicJob:DynamicJob:queryJobRunStatus']">
              <el-badge :value="getList.length" class="item">
                <i class="el-icon-bell" />
              </el-badge>
            </li>
            <span>近三天【数据治理管理-数据治理开发-脚本式开发】任务执行失败列表</span>
            <el-table :data="getList" border max-height='400'>
              <el-table-column align="center" prop="jobName" label="执行失败任务名称"> </el-table-column>
              <el-table-column align="center" label="执行失败时间">
                <template #default='{ row }'>
                  {{ row.createTime == null ? "" : row.createTime }}
                </template>
              </el-table-column>
            </el-table>
  
            <div class="buttom">
              <el-row>
                <el-col :span="12" v-permission="['DynamicJob:DynamicJob:changeRemind']">
  
                  <el-switch :disabled="isbool1" v-model="temp.notRemind" active-color="#13ce66" inactive-color="#ff4949"
                    :active-value="1" :inactive-value="0" @change="btnFun"> </el-switch>
                  今日不再提醒
                </el-col>
            
              </el-row>
            </div>
  
          </el-popover>
          <li>
            <img v-if="url" class="img" :src="url" alt="" />
            <span v-else class="user_icon">
              <i class="el-icon-user"></i>
            </span>
          </li>
          <li>
            <el-dropdown @command="handleCommand">
              <span> {{ username }} <i class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="useClick">个人中心</el-dropdown-item>
                <el-dropdown-item command="outlogin">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
        </ul>
      </div>
  
  
    </div>
  
  
  </template>
  
  <script>
  import jsonp from 'jsonp'
  import permission from '@/directive/permission/permission'
  import { getinfoImages } from '@/api/sys/user'
  import { getqueryJobRunStatus, getchangeRemind } from '@/api/errorLogin/index'
  export default {
    props: {
      isActive: {
        type: Boolean,
        default: false,
      },
    },
  
    directives: { permission },
    data() {
      return {
        isbool1: false,
        dialogVisible: true,
        temp: {
        },
        url: '',
        getList: [],
        number: null,
        isbool: false,
        weather: null,
        yslist: [
          { id: 0, title: '长江水', value: '809.23' },
          { id: 1, title: '黄河水', value: '8005.12' },
        ],
        gslist: [
          {
            id: 0,
            title: '滨州市',
            value: '0.00',
            color: '#1A5CF9',
            img: '2.png',
          },
          {
            id: 1,
            title: '东营市',
            value: '823.46',
            color: '#F9831A',
            img: '3.png',
          },
          {
            id: 2,
            title: '潍坊市',
            value: '0.00',
            color: '#F9F11A',
            img: '4.png',
          },
          {
            id: 3,
            title: '青岛市',
            value: '6027.44.',
            color: '#891AF9',
            img: '5.png',
          },
          {
            id: 4,
            title: '烟台市',
            value: '0.00',
            color: '#F94D1A',
            img: '6.png',
          },
          {
            id: 5,
            title: '威海市',
            value: '0.00',
            color: '#3FF91A',
            img: '7.png',
          },
        ],
        projectlist: [
          { id: 0, flag: 'bz', img: 'bz.png', padding: 'left: 637px;top: 24px;' },
          {
            id: 1,
            flag: 'mq',
            img: 'mq.png',
            padding: 'left: 850px;top: 110px;',
          },
          {
            id: 2,
            flag: 'sk',
            img: 'sk.png',
            padding: 'left: 975px;top: 169px;',
          },
          { id: 3, flag: 'gd', img: 'gd.png', padding: 'top: 25px;right: 200px;' },
        ],
        cityvalue: '正在获取中...',
        currentTime: this.getCurrentTime(),
        currentDate: this.getCurrentDate(),
        currentWeek: this.getcurrentWeek(),
      }
    },
  
    computed: {
  
      username() {
        return JSON.parse(localStorage.getItem('username'))
      },
      path() {
        return localStorage.getItem('path')
      },
    },
    mounted() {
      getqueryJobRunStatus().then(res => {
        if (res.data.code == 200) {
          if (!res.data.data.warning) {
            this.temp.notRemind = 1
          } else {
            this.temp.notRemind = 0
          }
        }
      })
      getinfoImages().then((res) => {
        if (res.data.code == 0) {
          console.log(res.data.msg, '-->>msg');
          this.url = res.data.msg
        }
      })
      setInterval(this.updateClock, 1000)
      this.getWeathers()
      this.$store.getters.permissions.map((v, i) => {
        if (v == 'DynamicJob:DynamicJob:queryJobRunStatus') {
          this.fun1()
        }
      })
    },
  
    methods: {
  
      btnFun() {
        if (this.temp.notRemind == 1) {
          getchangeRemind().then(res => {
  
          })
        }
      },
      fun1() {
        getqueryJobRunStatus().then((res) => {
          if (res.data.code == 200) {
            if (res.data.data.warning) {
              this.getList = res.data.data.jobDetail
            } else {
              this.getList = res.data.data.jobDetail
            }
          }
        })
      },
  
      // 获取天气 高德地图 获取key ca5082172a271638aed2ea82d1cfab56
      getWeathers() {
        let that = this
        // TODO 济南市
        let citycode = '370100'
        // TODO 德州市
        // let citycode = '371400'
        console.log(window.location.host)
        // if (window.location.host == "10.37.35.10") {
        //   citycode = '371500';
        // }
  
        jsonp(
          'https://restapi.amap.com/v3/weather/weatherInfo?key=ca5082172a271638aed2ea82d1cfab56&city=' + citycode + '&extensions=base',
          {
            name: 'success_jsonpCallback',
          },
          function (err, data) {
            that.weather = data.lives
          }
        )
      },
      // 获取天气
      // getLocation() {
      //   //Toast("如长时间未获取办理区域请手动选择");
      //   myBMap.init().then(() => {
      //     let that = this
      //     let geolocation = new BMap.Geolocation()
      //     // 创建百度地理位置实例，代替 navigator.geolocation
      //     geolocation.getCurrentPosition(function(e) {
      //       if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      //         // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
      //         let point = new BMap.Point(e.point.lng, e.point.lat)
      //         let gc = new BMap.Geocoder()
      //         gc.getLocation(point, function(rs) {
  
      //           that.cityvalue = rs.addressComponents.city
      //           //<<<<<<<<<<<<<<<<需要的位置信息在这获取
      //         })
      //       } else {
      //         Toast('定位失败，请手动选择区域或重新定位')
      //         this.showloading = false
      //       }
      //     })
      //   })
      // },
  
      //首页头部时间
      updateClock() {
        this.currentDate = this.getCurrentDate()
        this.currentWeek = this.getcurrentWeek()
        //TODO时间
        this.currentTime = this.getCurrentTime()
      },
      getCurrentTime() {
        const currentDate = new Date()
        const hours = currentDate.getHours()
        const minutes = currentDate.getMinutes()
        const seconds = currentDate.getSeconds()
        return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
      },
      getCurrentDate() {
        const currentDate = new Date()
        const year = currentDate.getFullYear()
        const month = currentDate.getMonth() + 1
        const day = currentDate.getDate()
  
        return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
      },
      getcurrentWeek() {
        const currentDate = new Date()
        const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        const dayOfWeek = daysOfWeek[currentDate.getDay()]
        return `${dayOfWeek}`
      },
      toggleClick() {
        this.$emit('meunClick')
      },
      handleCommand(command) {
        // 退出登录
        if (command == 'outlogin') {
          this.$router.push('/login')
          this.$store.dispatch('permission/ResetPermissionsAndRoute')
          this.setCookie('Admin-Token', '', -1)
          this.setCookie('rememberMe', '', -1)
          this.setCookie('sidebarStatus', '', -1)
          sessionStorage.clear()
        } else if (command == 'useClick') {
          this.$router.push({
            path: '/profile/index',
          })
        }
      },
      setCookie: function (cname, cvalue, exdays) {
        var d = new Date()
        d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000)
        var expires = 'expires=' + d.toUTCString()
        console.info(cname + '=' + cvalue + '; ' + expires)
        document.cookie = cname + '=' + cvalue + '; ' + expires
        console.info(document.cookie)
      },
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .top_box {
    width: 100%;
    height: 100%;
    display: flex;
  }
  
  .top_left {
    display: flex;
    align-items: center;
  
    .left-ico {
      height: 100%;
      display: flex;
      align-items: center;
    }
  
    .icon,
    .iconbox {
      width: 60px;
      height: 50px;
      margin-right: 15px;
      margin-left: 8px;
    }
  
    .title {
      font-size: 24px;
      color: #fff;
      height: 45px;
      line-height: 52px;
      font-weight: 600;
    }
  }
  
  .iframeSpan {
    height: 100%;
    z-index: 10;
    width: 95%;
    text-align: left;
    color: #fff;
    font-size: 16px;
  }
  
  .top_center {
    flex: 1;
  }
  
  .table_message_Ul {
    display: flex;
    float: right;
    list-style: none;
    color: white;
    align-items: center;
    height: 100%;
    align-items: center;
    margin: 0;
  }
  
  .table_message_Ul li {
    margin: 0px 10px;
  }
  
  .table_message_Ul li:nth-child(1) {
    line-height: 40px;
  }
  
  .top_right {
    line-height: 64px;
    display: flex;
    align-items: center;
  
    margin-right: 10px;
  }
  
  .el-dropdown span {
    color: white;
  }
  
  .top_right ul {
    display: flex;
    width: 100%;
    height: 100%;
    list-style: none;
    align-items: center;
    padding: 0;
  }
  
  .top_right ul li {
    padding: 0px 5px;
    color: white;
  }
  
  .el-badge {
    height: 40px;
    line-height: 35px;
  }
  
  .user_icon {
    display: inline-block;
    width: 50px;
    height: 40px;
    text-align: center;
    margin-top: 25px;
    border-radius: 10px;
    background-color: white;
  }
  
  .img {
    width: 80px;
    height: 60px;
    margin-top: 30px;
    padding: 10px;
  }
  
  .top_right .user_icon .el-icon-user {
    font-size: 35px;
    color: black;
  }
  
  .hamburger {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
  }
  
  .hamburger.is-active {
    transform: rotate(180deg);
  }
  </style>
  